<template>
  <div class="line-echart">
    <base-echart :options="options"></base-echart>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue'
import BaseEchart from '@/base-ui/echarts'
import { IEchartXAxisLabel, IEchartValueData } from '../types'

const props = defineProps<{
  labels: IEchartXAxisLabel[]
  values: IEchartValueData
}>()

const options = computed(() => {
  return {
    title: {
      text: 'mellaUV'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      formatter: (p: any) => {
        let returnStr = ''
        let len = p.length
        for (let i = 0; i < len; i++) {
          returnStr +=
            'total：' +
            String(p[i].value) +
            ' <br/>' +
            '<br/>' +
            String(p[i].name) +
            ' <br/>' +
            String(p[i].data.date)
        }
        return returnStr
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: props.labels
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: props.values
  }
})
</script>

<style lang="less" scoped></style>
